<template>
  <view class="my-userinfo-container">
    <!-- 头像及用户名区域 -->
    <view class="my-top">
      <view class="avatar">
        <image src="https://gitee.com/zeerteam/drawing-bed/raw/master/img0/0061.webp" class="avatar-img"></image>
      </view>
      <view class="username">
        {{userinfo.nickName}}
      </view>
    </view>
    <!-- 收藏店铺商品区域 -->
    <view class="bottom">
      <!-- 上 -->
      <view class="b_t">
        <view class="b_t_item">
          <view>
            1{{}}
          </view>
          <view>
            收藏的店铺
          </view>
        </view>
        <view class="b_t_item">
          <view>
            1{{}}
          </view>
          <view>
            收藏的商品
          </view>
        </view>
        <view class="b_t_item">
          <view>
            1{{}}
          </view>
          <view>
            关注的商品
          </view>
        </view>
        <view class="b_t_item">
          <view>
            1{{}}
          </view>
          <view>
            足迹
          </view>
        </view>
      </view>
      <!-- 中 -->
      <view class="b_m">
        <view class="b_m_title">我的订单</view>
        <view class="b_m_box">
          <view class="b_m_item">
            <view>
              <image class="state_img" src="/static/state_img/await_payment.png" mode=""></image>
            </view>
            <view>
              待付款
            </view>
          </view>
          <view class="b_m_item">
            <view>
              <image class="state_img" src="/static/state_img/await_getgoods.png" mode=""></image>
            </view>
            <view>
              待收货
            </view>
          </view>
          <view class="b_m_item">
            <view>
              <image class="state_img" src="/static/state_img/refund.png" mode=""></image>
            </view>
            <view>
              退款/退货
            </view>
          </view>
          <view class="b_m_item">
            <view>
              <image class="state_img" src="/static/state_img/all_orders.png" mode=""></image>
            </view>
            <view>
              全部订单
            </view>
          </view>
        </view>
      </view>
      <!-- 下 -->
      <view class="b_b">
        <view class="b_b_item">
          <view class="b_b_l">
            收货地址
          </view>
          <view class="b_b_r">
            <uni-icons type="right" size="16"></uni-icons>
          </view>
        </view>
        <view class="b_b_item">
          <view class="b_b_l">
            联系客服
          </view>
          <view class="b_b_r">
            <uni-icons type="right" size="16"></uni-icons>
          </view>
        </view>
        <view class="b_b_item" @click="logout">
          <view class="b_b_l">
            退出登录
          </view>
          <view class="b_b_r">
            <uni-icons type="right" size="16"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  export default {
    name:"my-userinfo",
    computed:{
      ...mapState('m_user',['userinfo','token'])
    },
    methods:{
      ...mapMutations('m_user',['updateToken','updateAddress','updateUserInfo']),
      async logout(){
        const [err,res]=await uni.showModal({
          title:'提示',
          content:'您确认要退出登录吗?'
        }).catch(err=>err)
        // console.log(res)
        if(res&&res.confirm){
          this.updateToken('')
          this.updateAddress({})
          this.updateUserInfo({})
        }
      }
    }
  }
</script>

<style lang="scss">
page,.my-userinfo-container{
  height: 100%;
  background-color: #eee;
}
.my-userinfo-container{
  .my-top{
    height: 200px;
    background-color: #E16531;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .avatar{
      width: 100px;
      height: 100px;
      background-color: #FFF;
      border: 2px solid #ccc;
      padding: 1px;
      border-radius: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      .avatar-img{
        width: 98px;
        height: 98px;
        border-radius: 49px;
      }
    }
    .username{
      font-size: 16px;
      color: #fff;
      margin-top: 10px;
    }
  }
  .bottom{
    width: 90%;
    margin: -10px auto;
    .b_t,.b_m,.b_b{
      padding: 10px;
      background-color: #FFF;
      border-radius: 6px;
    }
    .b_m{
      margin: 8px 0;
      .b_m_title{
        margin-bottom: 20px;
      }
      .b_m_item{
        .state_img{
          width: 30px;
          height: 30px;
        }
      }
    }
    .b_t,.b_m_box{
      font-size: 13px;
      display: flex;
      justify-content: space-around;
    }
    .b_b_item{
      display: flex;
      justify-content: space-between;
      &:nth-child(2){
        margin: 30px 0;
      }
    }
    .b_t_item,
    .b_m_item{
      text-align: center;
    }
  }
}
</style>
